<template>
  <div id="updateInfo" class="boxShadow-white scroll" >
    <div id="closeBox"><svg t="1622123506916" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2345" width="20" height="20"><path d="M511.968 376.224 796.096 92.096C833.536 54.624 894.4 54.624 931.84 92.096 969.312 129.568 969.312 190.4 931.84 227.872L647.744 512 931.84 796.096C969.312 833.568 969.312 894.4 931.84 931.872 894.4 969.344 833.536 969.344 796.096 931.872L511.968 647.744 227.84 931.872C190.4 969.344 129.536 969.344 92.096 931.872 54.624 894.4 54.624 833.568 92.096 796.096L376.224 512 92.096 227.872C54.624 190.4 54.624 129.568 92.096 92.096 129.536 54.624 190.4 54.624 227.84 92.096L511.968 376.224Z" p-id="2346"></path></svg></div>
    <div id="gameUpdate" v-if="this.gameInfo" class="flex-column">
      <div class="infoImg"><img :src="gameUpdate.gameImg" alt=""></div>
      <p>海报</p>
      <input type="text" class="input-100" v-model="gameUpdate.gameImg" >
      <p>游戏名</p>
      <input type="text" class="input-100" v-model="gameUpdate.gameName" >
      <p>标签</p>
      <input type="text" class="input-100" v-model="gameUpdate.gameTags" >
      <button class="button button-color-white" @click="updateGame">保存</button>
    </div>
    <div id="movieUpdate" class="flex-column" v-if="this.movieInfo">
      <div class="infoImg"><img :src="movieUpdate.movieImg" alt=""></div>
      <p>海报</p>
      <input type="text" class="input-100" v-model="movieUpdate.movieImg" >
      <p>电影名</p>
      <input type="text" class="input-100" v-model="movieUpdate.movieName" >
      <p>标签</p>
      <input type="text" class="input-100" v-model="movieUpdate.movieGen" >
      <button class="button button-color-white" @click="updateMovie">保存</button>
    </div>
    <div id="musicArtUpdate" v-if="this.musicArtInfo" class="flex-column">
      <p>歌手名</p>
      <input type="text" class="input-100" v-model="musicArtUpdate.musicArt" >
      <p>英文名</p>
      <input type="text" class="input-100" v-model="musicArtUpdate.artEnName" >
      <p>别名</p>
      <input type="text" class="input-100" v-model="musicArtUpdate.artNickName" >
      <p>国籍</p>
      <input type="text" class="input-100" v-model="musicArtUpdate.artCountry" >
      <p>生日</p>
      <input type="text" class="input-100" v-model="musicArtUpdate.artBirthday" >
      <p>现公司</p>
      <input type="text" class="input-100" v-model="musicArtUpdate.artCompany" >
      <p>主要作品</p>
      <input type="text" class="input-100" v-model="musicArtUpdate.artMainMusic" >
      <p>职业</p>
      <input type="text" class="input-100" v-model="musicArtUpdate.artProfession">
      <p>歌手简介</p>
      <textarea type="text" class="input-100 scroll" v-model="musicArtUpdate.artBasicInfo"></textarea>
      <button class="button button-color-white" @click="updateMusicArt">保存</button>
    </div>
    <div id="musicAlbumUpdate" v-if="this.musicAlbumInfo" class="flex-column">
      <div class="infoImgSq"><img :src="musicAlbumUpdate.albumImg" alt=""></div>
      <p>专辑封面</p>
      <input type="text" class="input-100" v-model="musicAlbumUpdate.albumImg" >
      <p>专辑名</p>
      <input type="text" class="input-100" v-model="musicAlbumUpdate.albumName" >
      <button class="button button-color-white" @click="updateMusicAlbum">保存</button>
    </div>
  </div>
</template>

<script>
    import $ from "jquery";

    export default {
      name: "updateInfo",
      props:['gameInfo','movieInfo','musicInfo','musicArtInfo','musicAlbumInfo'],
      data(){
        return{
          gameUpdate:{},
          movieUpdate:{},
          musicUpdate:{},
          musicArtUpdate:{},
          musicAlbumUpdate:{},
        }
      },
      watch:{
          gameInfo:function (val) {
            this.gameUpdate = val
          },
          movieInfo:function (val) {
            this.movieUpdate = val
          },
          musicArtInfo:function (val) {
            this.musicArtUpdate = val
          },
          musicAlbumInfo:function (val) {
            this.musicAlbumUpdate = val
          }
      },
      methods:{
        async updateGame(){
            const {data:res} = await this.$axios.post('v1/updateGameInfo',this.gameUpdate)
            if(res.code === 200){
              this.$message.success("更新成功")
            }
        },
        async updateMovie(){
          const {data:res} = await this.$axios.post('v1/updateMovieInfo',this.movieUpdate)
          if(res.code === 200){
            this.$message.success("更新成功")
          }
        },
        async updateMusicAlbum(){
          const {data:res} = await this.$axios.post('v1/updateMusicAlbum',this.musicAlbumUpdate)
          if(res.code === 200){
            this.$message.success("更新成功")
          }
        },
        async updateMusicArt(){
          const {data:res} = await this.$axios.post('v1/updateMusicArt',this.musicArtUpdate)
          if(res.code === 200){
            this.$message.success("更新成功")
          }
        },

      },
      created() {

      },
      mounted() {
        $(function () {
          $('#closeBox').click(function () {
            $('.updateInfo').css('display','none')
            $('.updateInfo_').css('display','none')
          });
        })
      }
    }
</script>

<style lang="less" scoped>
  #updateInfo{
    width: 500px;
    max-height: 600px;
    background-color: var(--theme-bgColor-aside-nav);
    position: absolute;
    z-index: +1;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 6px;
    padding: 20px;
    overflow-y: auto;
    input{
      margin-bottom: 20px;
    }
    p{
      margin-bottom: 5px;
      color: var(--theme-fontMain);
    }
    button{
      margin-top: 20px;
    }
    textarea{
      border-radius: 6px;
      height: 100px;
      resize: none;
      padding: 5px 10px;
      margin-right: 20px;
      white-space: normal;
    }
  }
  #closeBox{
    width: 20px;
    height: 20px;
    /*background-color: black;*/
    position: absolute;
    right: 10px;
    top: 10px;
    transition: all 0.1s ease-in-out;
  }
  #closeBox:hover{
    fill: #9e5bdf;
  }
  .infoImg{
    width: 170px;
    height: 238px;
    background-color: white;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 20px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .infoImgSq{
    width: 170px;
    height: 170px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 20px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .flex-column{
    display: flex;
    flex-flow: column;
  }

</style>
